<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../../s/vue/2.7.16/vue.min.js"></script>
</head>
<body>


	<h3>01 声明式渲染</h3>

	<div id="app-1">message: {{ message }}</div>
	<script>
		var app1 = new Vue({
			el : '#app-1',
			data : {
				message : 'Hello Vue!'
			}
		});
	</script>

	<hr>
	<h3>02 声明式渲染</h3>
	<div id="app-2">
		<span v-bind:title="message"> Hover your mouse over me for a few seconds to see my dynamically bound title! </span>
	</div>
	<script>
		var app2 = new Vue({
			el : '#app-2',
			data : {
				message : 'You loaded this page on ' + new Date()
			}
		});
	</script>

	<hr>
	<h3>03 条件与循环</h3>
	<div id="app-3">
		<p v-if="seen1">Now you see me (1)</p>
		<p v-if="seen2">Now you see me (2)</p>
	</div>
	<script>
		var app3 = new Vue({
			el : '#app-3',
			data : {
				seen1 : true,
				seen2 : false
			}
		});
	</script>

	<hr>
	<h3>04 条件与循环</h3>

	<div id="app-4">
		<ol>
			<li v-for="todo in todos">{{ todo.text }}</li>
		</ol>
	</div>

	<script>
		var app4 = new Vue({
			el : '#app-4',
			data : {
				todos : [ {
					text : 'Learn JavaScript'
				}, {
					text : 'Learn Vue'
				}, {
					text : 'Build something awesome'
				} ]
			}
		});
	</script>

	<hr>
	<h3>05 处理用户输入</h3>

	<div id="app-5">
		<p>{{ message }}</p>
		<button v-on:click="reverseMessage">Reverse Message</button>
	</div>
	<script>
		var app5 = new Vue({
			el : '#app-5',
			data : {
				message : 'Hello Vue.js!'
			},
			methods : {
				reverseMessage : function() {
					this.message = this.message.split('').reverse().join('')
				}
			}
		});
	</script>

	<hr>
	<h3>06 处理用户输入</h3>
	<div id="app-6">
		<p>{{ message }}</p>
		<input v-model="message">
	</div>
	<script>
		var app6 = new Vue({
			el : '#app-6',
			data : {
				message : 'Hello Vue!'
			}
		});
	</script>

	<hr>
	<h3>07 用组件构建</h3>
	<div id="app-7">
		<ol>
			<todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
		</ol>
	</div>
	<script>
		Vue.component('todo-item', {
			props : [ 'todo' ],
			template : '<li>{{ todo.text }}</li>'
		})

		var app7 = new Vue({
			el : '#app-7',
			data : {
				groceryList : [ {
					text : 'Vegetables'
				}, {
					text : 'Cheese'
				}, {
					text : 'Whatever else humans are supposed to eat'
				} ]
			}
		});
	</script>


</body>
</html>